In traditional web application designs, a web application is composed of a number of different web pages. To render a particular web page within the application, the following set of interactions is performed: a web browser at a client device requests (using a Hypertext Transfer Protocol (HTTP) message) a particular web page from a web server; in response, the web server transmits (using HTTP) the code for the page back to the web browser, the code including, e.g., Hypertext Markup Language (HTML), JavaScript®, and Cascading Style Sheets (CSS) code; the web browser then loads the code and renders the page, thereby enabling a user to view and interact with the page. When the user subsequently wants to view different content within the application, the user will click a hyperlink or input on the page that points to a different page within the application, and then the above-mentioned request/response/load/render procedure is performed for the different page.
Single-page applications (SPA) are web applications that operate within a single web page. In an SPA, the content for a single web page is sent by the web server to the web browser, and that page is loaded/rendered, as described above with the traditional web application. Subsequently, when the user wants to view different content within the application, the user will click a hyperlink or input on the page. But instead of navigating to a different page in the way described above with the traditional web application, the same page will remain loaded, and its content will be dynamically updated. This dynamic updating may be accomplished in a number of different ways; it may involve, for example, the web browser performing background HTTP fetches for new content, updating the Document Object Model (DOM) of the page (via JavaScript code), and/or other techniques.
A web application framework that can be used to create SPAs is AngularJS®. AngularJS is a JavaScript framework. When developing an AngularJS application, the developer creates HTML templates according to AngularJS's template language; the HTML templates include HTML that is embedded with AngularJS scripts and other AngularJS coding constructs, such as directives. At the web browser, AngularJS JavaScript libraries are loaded and interpret the HTML templates, such that the resulting pages look and behave as defined in the templates.
FIG. 1A shows a number of different aspects of a sample SPA 150 of the related art. FIG. 1A shows an example HTML code block 152 for the SPA 150 (the code block 152, which includes AngularJS code), a data model 154 corresponding to the SPA 154, and an example user interface 156 produced by the SPA 150. As will be described in more detail below, the HTML code block 152 may be processed by a web browser; during this processing, the SPA 150 may be represented according to the shown data model 154; and the resulting example user interface 156 may be generated based on the data model 154 and shown in a window of the web browser.
As shown in FIG. 1A, the code block 152 defines a content controller (called “contentCtrl”) as part of a content module; when the code block 152 is being processed, the SPA 150 can use the content controller to populate/generate the resulting user interface 156.
In the example code block 152 shown in FIG. 1A, a division element (i.e., <DIV> element) is identified by the ID of “contentModule” and contains a string with the text “Today is.” Additionally, this <DIV> element is associated with a content controller (called “contentCtrl”); and the contentCtrl is defined as having a function called “getDate( ),” which is defined using a “$scope” object. Thus, when the web browser processes the code block 152, it will load the contentCtrl and call its getDate( ) function. The web browser, during the processing, will also read in the “Today is” string from within the <DIV> element, and append the result of the getData( ) function to the “Today is” string, resulting in the example “Today is Apr. 16, 2015” string shown in the user interface 156.
FIG. 1B shows a non-limiting example system 140 of the related art, the system 140 including a client device 100 and server 120. FIG. 1B also shows an example sequence of events that occurs, as defined in the related art, when the client device 100 requests to load a particular web page hosted at the server 120 using conventional AngularJS techniques.
At action 101, the client device 100 can transmit an HTTP request message to the server 120. At action 102, the server 120 can transmit to the client 100 a corresponding HTTP response message that includes raw/“uncompiled” HTML. At action 103, the web browser (running in the client device 100) can fetch various AngularJS modules comprising an SPA. At action 104, the client device 100 can perform an AngularJS bootstrap phase of loading the SPA and the associated modules.
At action 105, upon completing the bootstrap phase, the client device 100 can then begin compiling the AngularJS SPA, thereby producing the initial user interface (which may composed of displayable code/data, such as HTML in conjunction with CSS and other code) for the page. It should be appreciated that the compiling referred to herein relates to AngularJS compiling service. The AngularJS compiling service operates in two phases. First, the compiling service will traverse the DOM and collect all of the directives to create a linking function. Next, the compiling service combines the directives with a scope object to produce the user interface that will be displayed. The scope object is an application object that can take “ownership” of variables and functions. For example, the scope object takes ownership of the “getDate( )” function (as shown in FIG. 1A) that is responsible for generating the current date value that is stored in variable “date.”
At action 106, the page enters a runtime data binding phase, during which the page's user interface is displayed at the client device 100. During this phase, the user of the client device 100 can interact with the page's user interface and view data displayed in the user interface. The client device 100 can allow the user to interact with the SPA until termination (at action 107), which could occur based on any variety of triggering events (e.g., the page being reloaded, or the user navigating away from the page).
As noted above, when the page for an SPA is loaded, its contents can be changed through dynamic updating. In AngularJS, the AngularJS “routing” service is one mechanism for structuring how dynamic updating is performed. The AngularJS routing service operates generally as follows: For a given Angular SPA, multiple “views” can be defined; each view is associated with an HTML template that may include AngularJS coding constructs. When a page/SPA is first loaded, each of the HTML views is associated with a particular URL path (or “route”), and the correspondences between views and URL paths are registered with the routing service. As an example, the baseline URL for a page/SPA may be “http://example.com/app,” and may include two views, View One and View Two. View One may have a route of “viewone” and be accessible at the URL “http://example.com/app#viewone,” while View Two may have a route of “viewtwo” and be accessible at the URL “http://example.com/app#viewtwo.” When the page/SPA first loads, it may default to View One and the user interface produced by View One will be displayed in the web browser application. Then, when the user clicks on a link that points to the URL “http://example.com/app#viewtwo,” the page/SPA will, via the AngularJS routing service, dynamically load and then display the user interface produced by View Two; this may include performing asynchronous/background HTTP fetches to obtain the content for View Two, and then correspondingly updating the DOM for the page. From the perspective of the user, it may appear as if the user has navigated to an entirely different page (and, in fact, the URL shown in the web browser application will have changed); however, the same page/SPA remains loaded, while only the underlying view has changed.
In addition to AngularJS, a number of other frameworks have been developed that may be used to develop SPAs, including but not limited to Backbone.js, Ember.js, and React.
While extant SPA frameworks have proven to be useful, they possess a number of limitations. Accordingly, improvements in the areas of web technology, SPA technology, and related technology areas are needed.